
<template>
  <div class="app-container-box">
    <div class="box-tag" />
    <div class="warp-line-top" />

    <div class="title-box">
      <span class="auth-method-text">当前授权方式：</span>
      <el-radio-group v-model="authType" class="auth-type-radio">
        <el-radio :label="3">无限制</el-radio>
        <el-radio :label="6">观众白名单观看</el-radio>
      </el-radio-group>
    </div>

    <div class="middle-btn-box">
      <el-button class="import-white-user-list-btn" type="primary">导入观众白名单</el-button>
      <el-button class="download-white-list-excel" type="text">下载白名单Excel模板</el-button>
    </div>

    <el-button class="view-white-list-btn" type="text">查看观众名单>></el-button>
    <div class="tips-text">
      <p>
        注：观众白名单内的观众通过观众名和密码才能观看直播，导入将增量上传新名单，若想完全替换名单，请先清空名单后重新上传可分批导入，<br>
        每个渠道最多可导入1万条，每个频道总量最多可导入10万条<br>
      </p>
    </div>

    <div class="warp-line-btn" />
    <el-button class="submit-btn" type="primary">提交</el-button>

    <el-breadcrumb class="app-breadcrumb" separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item,index) in routerPaths" :key="item.path">
          <span v-if="item.redirect==='noRedirect'||index==routerPaths.length-1" class="no-redirect">{{ item.meta.title }}</span>
          <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>

    <router-view />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { listSignIn } from '@/api/lives'
export default {
  name: 'SubjectSetting',
  components: {
  },
  data() {
    return {
      singInData: [],
      currentLive: undefined,
      authType: '',
      SingInQuery: {
        start: 1,
        live_id: '',
        length: 14
      },
      routerPaths: [
        { path: '/permission/view', meta: { title: '观看授权' }},
        { path: '/permission/changetype', meta: { title: '更改授权类型' }}
      ]

    }
  },
  computed: {
    ...mapGetters([
      'choicedLive'
    ])
  },
  watch: {
    async 'choicedLive'(n, o) {
      this.currentLive = this.choicedLive
      this.SingInQuery.live_id = this.choicedLive.id
      var res = await listSignIn(this.SingInQuery)
      this.singInData = res.data
      this.totalWatched = res.count
    },
    SingInQuery: {
      async handler(n, o) {
        var res = await listSignIn(this.SingInQuery)
        this.singInData = res.data
      },
      deep: true
    }
  },
  async mounted() {
    if (this.choicedLive.id) {
      this.SingInQuery.live_id = this.choicedLive.id
      var res = await listSignIn(this.SingInQuery)
      this.singInData = res.data
      this.totalWatched = res.count
    }
  },
  methods: {
    elTableHeaderStyle() {
      return {
        background: '#F0F1F2',
        font_size: '18px',
        font_family: 'PingFang SC',
        font_weight: 400,
        color: '#6D7A8E'
      }
    },
    elTableCellStyle() {
      return {
        font_size: '20px',
        font_family: 'PingFang SC',
        font_weight: 400,
        color: '#8B9DBA'
      }
    },
    handleLink(r) {
      this.$router.push(r.path)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container-box {
  height: 547px;

}
.box-tag {
  width: 4px;
  height: 28px;
  background: #2E9BEA;
  border-radius: 2px;
  position: relative;
  top: 25px;
}

.warp-line-top {
  width: 1627px;
  height: 4px;
  background: #EDF5FB;
  top: 85px;
  position: absolute;
}
.title-box {
    width: 1423px;
    height: 79px;
    border: 1px solid #9CABC3;
    border-radius: 3px;
    display: flex;
    align-items: center;
    position: absolute;
    top: 98px;
    left: 55px;
    .auth-method-text {
        width: auto;
        height: 18px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #6D7A8E;
        left: 28px;
        position: absolute;
    }
}
.table-list-box {
  position: absolute;
  top: 198px;
  left: 55px;
  width: 1518px;
  height: 654px;
}
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  width: auto;
  height: auto;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4A5462;
  top: 31px;
  left: 54px;
  position: absolute;
}
.auth-type-radio {

  width: auto;
  height: auto;
  left: 171px;
  position: absolute;
  ::v-deep {
    span {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #6D7A8E;
    }

  }
}

.middle-btn-box {
  display: flex;
  align-items: center;
  position: absolute;
  justify-content: space-around;
  left: 56px;
  top: 207px;
  width: 390px;
  .import-white-user-list-btn {
    width: 193px;
    height: 47px;
    background: #2E9BEA;
    border-radius: 10px;
    ::v-deep {
      span {
        width: 125px;
        height: 18px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }
  .download-white-list-excel {
    margin-left: 27px;
    ::v-deep {
      span {
        width: 170px;
        height: 18px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #2E9BEA;
      }
    }
  }
}
.view-white-list-btn {
  position: absolute;
  left: 90px;
  top: 290px;
  ::v-deep {
    span {
      width: auto;
      height: auto;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #2E9BEA;
    }
  }
}
.tips-text {
  position: absolute;
  top: 343px;
  left: 88px;
  p {
    width: 1121px;
    height: 50px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6D7A8E;
  }
}
.submit-btn {
  width: auto;
  height: auto;
  background: #2E9BEA;
  border-radius: 10px;
  position: absolute;
  top: 478px;
  left: 662px;
  ::v-deep {
    span {
    width: 35px;
    height: 18px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    }
  }
}
.warp-line-btn {
  position: absolute;
  top: 465px;
  width: 1514px;
  height: 4px;
  background: #EDF5FB;
}
</style>
